<template>
  <el-form ref="addOrEditFormRef" :model="formData" :rules="rules" label-width="180" size="">
    <!-- 所属施工企业信息 hzj 2023/11/6-->
    <el-row justify="center" style="margin-top: 50px; margin-bottom: 50px">
      <el-col :span="12" style="position: relative">
        <el-form-item label="施工总承包" prop="lumpContractorCorpid">
          <el-input
            v-model="formData.lumpContractorCorpName"
            readonly
            placeholder="请点击选择施工总承包"
            class="input300 inputred"
            @click="openZBCorpSelect"
          >
          </el-input>
          <!-- <el-button type="primary" style="position: absolute; right: 30px" plain>
            <el-icon> <OfficeBuilding /> </el-icon>&nbsp;选择
          </el-button> -->
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="施工总承包信用代码" prop="lumpContractorCorpCode">
          <el-input
            v-model="formData.lumpContractorCorpCode"
            readonly
            disabled
            placeholder="请选择施工总承包"
            class="input300"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="施工总承包联系电话" prop="lumpContractorCorpPhoneNum">
          <el-input
            v-model="formData.lumpContractorCorpPhoneNum"
            placeholder="请输入施工总承包联系电话"
            class="input300"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12"> </el-col>
      <el-col :span="16">
        <el-table
          :data="projectList"
          highlight-current-row
          style="width: 100%; height: 250px"
          @current-change="handleCurrentChange"
        >
          <el-table-column prop="name" label="项目名称" />
          <el-table-column prop="prjPlanNum" label="项目编号" />
          <el-table-column prop="categoryName" label="项目分类" />
        </el-table>
      </el-col>
    </el-row>
  </el-form>
  <SelectCorp
    v-if="dialogSelectZBCorp.visible"
    :dialog-select-corp="dialogSelectZBCorp"
    :corp-list-query="'common'"
    @zb-corp-send-close="zbCorpSendClose"
  >
  </SelectCorp>
</template>

<script setup lang="ts">
import { NewProjectManagerType } from "@/api/manager/project/types";
import { FormRules } from "element-plus";
import SelectCorp from "@/views/manager/common/SelectCorp/index.vue";
import { noRegisterProjects } from "@/api/common/project";

const emit = defineEmits(["currentProject", "currentCorp"]);
const formData = reactive<NewProjectManagerType>({});
const rules = reactive<FormRules<NewProjectManagerType>>({
  lumpContractorCorpid: [{ required: true, message: "请选择施工企业", trigger: "blur" }],
  lumpContractorCorpCode: [
    {
      required: true,
      message: "请输入施工总承包社会信用代码",
      trigger: "blur",
    },
  ],
  lumpContractorCorpPhoneNum: [{ required: false, message: "请输入施工总承包联系电话", trigger: "blur" }],
});
const addOrEditFormRef = ref(ElForm);
const dialogSelectZBCorp = reactive<DialogOption>({
  visible: false,
  title: "选择施工企业",
  id: 0,
});
//项目列表(需要请求API获取)
const projectList = ref();
const currentProject = ref({
  name: "",
});

//选择项目回调
const handleCurrentChange = (val: any) => {
  currentProject.value = val;
  //Object.assign(formData, val);
};

/* 关闭总包企业选择 */
function zbCorpSendClose(corpInfo: { corpId: number; name: string; code: string }) {
  if (corpInfo) {
    formData.lumpContractorCorpid = corpInfo.corpId;
    formData.lumpContractorCorpName = corpInfo.name;
    formData.lumpContractorCorpCode = corpInfo.code;
    /*未登记项目下拉框*/
    noRegisterProjects(corpInfo.corpId).then((data) => {
      if (data.success) {
        projectList.value = data.data.list;
      } else {
        ElMessage({
          type: "error",
          message: data.msg,
        });
      }
    });
  }
  dialogSelectZBCorp.visible = false;
}

/**选择施工企业 */
function openZBCorpSelect() {
  dialogSelectZBCorp.visible = true;
}

/**表单校验*/
async function validation(noProject: boolean) {
  if (noProject) {
    return await addOrEditFormRef.value.validate();
  } else {
    console.log(currentProject.value);
    if (!currentProject.value.projectId) {
      ElMessage({
        type: "error",
        message: "请选择项目",
      });
      return false;
    }
  }
  return await addOrEditFormRef.value.validate();
}

/**重置表单*/
function resetForm() {
  addOrEditFormRef.value.resetFields();
  addOrEditFormRef.value.clearValidate();
}

function clearUp() {
  resetForm();
}
defineExpose({
  clearUp,
  validation,
  formData,
  currentProject,
});
</script>

<style scoped>
.input300 {
  width: 300px !important;
}
:deep(.el-input__wrapper) {
  width: 200px;
}

:deep(.el-form-item__label) {
  color: #696868;
  font-size: 13px;
}
:deep(tr.current-row > td.el-table__cell) {
  background-color: #409eff !important;
  color: #fff !important;
}
</style>
